import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:share_fit/app/components/back_btn_icon.dart';
import 'package:share_fit/app/controllers/home/exercise_records/model/exercise_type.dart';
import 'package:share_fit/app/helper/ext/tr_ext.dart';
import 'package:share_fit/app/tools/color_const.dart';
import 'package:share_fit/generated/locales.g.dart';

import 'logic.dart';

class IndoorSportsPage extends StatelessWidget {
  IndoorSportsPage({super.key});

  final logic = Get.put(IndoorSportsLogic());
  final state = Get.find<IndoorSportsLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: BackBtnIcon(onTap: () => logic.goBack()),
        title: Text(
          LocaleKeys.sports_category_indoor_sport_text.ts,
          style: TextStyle(color: ColorConst.primaryFontColor),
        ),
        centerTitle: true,
      ),
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: 40.w),
        child: ListView(
          children: [
            SizedBox(height: 60.h),
            Row(
              children: [
                SizedBox(width: 30.w),
                Text(
                  '${LocaleKeys.sports_category_selection_text.ts} ${LocaleKeys.sports_category_indoor_sport_text.ts}',
                  style: TextStyle(fontSize: 52.sp),
                ),
              ],
            ),
            SizedBox(height: 60.h),
            GridView.builder(
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              itemCount: state.typeList.length,
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                mainAxisSpacing: 30.w,
                crossAxisSpacing: 30.w,
                childAspectRatio: 3.0,
              ),
              itemBuilder: (context, index) {
                return _buildItem(index);
              },
            ),
            SizedBox(height: 90.h),
          ],
        ),
      ),
    );
  }

  Widget _buildItem(int index) {
    ExerciseType item = state.typeList[index];
    return GetBuilder<IndoorSportsLogic>(
      id: logic.indoorSportsTypeSelected,
      builder: (_) => GestureDetector(
        onTap: () => logic.onItemSelected(item.type, index),
        child: Container(
          alignment: Alignment.center,
          decoration: BoxDecoration(
            color: state.selections[index] ? const Color.fromRGBO(249, 98, 43, 1) : Colors.white,
            borderRadius: BorderRadius.circular(60.r),
          ),
          child: Text(
            item.getTypeName,
            style: TextStyle(color: state.selections[index] ? Colors.white : Colors.black.withOpacity(.5), fontSize: 48.sp),
          ),
        ),
      ),
      // builder: (_) {
      //   return TextButton(
      //     onPressed: () => _.onItemSelected(item.type, index),
      //     style: TextButton.styleFrom(
      //       padding: EdgeInsets.zero,
      //       foregroundColor: state.selections[index] ? const Color.fromRGBO(249, 98, 43, 1) : Colors.white,
      //       backgroundColor: state.selections[index] ? const Color.fromRGBO(249, 98, 43, 1) : Colors.white,
      //     ),
      //     child: Text(
      //       item.getTypeName,
      //       style: TextStyle(color: state.selections[index] ? Colors.white : Colors.black.withOpacity(.5), fontSize: 48.sp),
      //     ),
      //   );
      // },
    );
  }
}
